<template>
	<view class="login">
		<view class="content-wrapper">
			<view class="title">
				<image src="../../static/image/vote_log.png"></image>
				<h1>欢迎使用指尖投票</h1>
			</view>
			<view class="login-form">
				<!-- <view class="login-form-items">
					<view class="login-form-items-title">手机号</view>
					<input  type="number" class="login-input" placeholder="手机号" v-model="form.phone" maxlength="11" />
				</view> -->
				<view class="login-form-items">
					<view class="login-form-items-title">用户名</view>
					<input type="text" class="login-input" placeholder="输入用户名" v-model="form.username" />
				</view>

				<view class="login-form-items">
					<view class="login-form-items-title">登录密码</view>
					<input maxlength="20" :type="pwd_show?'text':'password'" class="login-input"
						placeholder="数字或字母且不少于6位" v-model="form.password" />
					<image class="password_img" @click="change_pwd" style="width: 25px; height: 15px;"
						:src="pwd_show? '/static/image/eye_open.png':'/static/image/eye_close.png'"></image>
				</view>

				<view class="login-form-items">
					<view class="login-form-items-title">验证码</view>
					<input maxlength="4" type="text" class="login-input" placeholder="请输入验证码" v-model="form.code" />
					<view class="captcha-wrapper">
						<image class="img_code" :src="imagUrl" @click="getCaptchaHandler"
							style="width: 100px; height: 38px;"></image>
					</view>
				</view>
			</view>
		</view>
		<div class="submit-wrapper">
			<button style="background-color: #1296db;" type="primary" class="login-btn"
				@click="loginHandler">登录</button>
		</div>
		<view class="footer" style="color: #1296db;">
			<view>
				<!-- 忘记密码？ -->
			</view>
			<view @click="goToRegister">
				马上注册
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
	} from 'vue'
	import {
		useRouter,
		toast,
		setStorageSync
	} from '@/utils/index.js'
	import {
		getCaptcha,
		login,
		getInfo
	} from '@/api/userInfo.js'
	const form = ref({
		username: '',
		code: '',
		uuid: '',
		password: ''
	})
	const imagUrl = ref("")
	const uuid = ref('')
	const pwd_show = ref(false)
	const change_pwd = () => {
		pwd_show.value = !pwd_show.value
	}
	const getCaptchaHandler = async () => {
		const res = await getCaptcha();
		imagUrl.value = "data:image/gif;base64," + res.img
		uuid.value = res.uuid
		form.value.uuid = res.uuid
	}
	const goToRegister = () => {
		useRouter("/pages/register/register")
	}
	const gotoForgetPsd = () => {
		useRouter("/pages/forgetPsd/forgetPsd")
	}
	const loginHandler = async () => {

		var phonePattern = /^1[3456789]\d{9}$/;
		var passwordPattern = /^[A-Za-z0-9]{6,20}$/
		//手机号码校验
		if (!form.value.username) {
			toast("用户名不能为空")
			return
		}
		// else if (!phonePattern.test(form.value.phone)) {
		// 	toast("输入正确的手机号")
		// 	return
		// } 
		else if (!passwordPattern.test(form.value.password)) {
			toast("输入数字或字母且不少于6位的密码")
			return
		} else if (!form.value.code) {
			toast("验证码不能为空")
		} else {
			const result = await login({
				uuid: uuid.value,
				...form.value
			})
			setStorageSync("token", result.token)

			useRouter("/pages/voteAllList/voteAllList", {}, 'switchTab')
			if (result?.token) {
				getInfo().then(res => {
					console.log('resres', res.user)
					setStorageSync("currentUser", res.user)
				})
			}
		}
	}
	const token = uni.getStorageSync("token");
	if (token) {
		useRouter("/pages/voteAllList/voteAllList", {}, 'switchTab')
	} else {
		getCaptchaHandler()
	}
</script>

<style lang="less">
	page {
		background: #F4F5F6;
	}

	.img_code {
		width: 60px;
		height: 30px;
	}

	.login {
		.content-wrapper {
			width: 100%;


			.title {
				margin-top: 35rpx;
				width: 100%;
				margin-bottom: 10px;
				display: flex;
				justify-content: center;
				align-items: center;

				image {
					width: 30px;
					height: 30px;
					margin-right: 5px;
				}

				h1 {
					border: 0px;
					text-align: center;
					height: 50px;
					line-height: 50px;
					font-size: 17px;
					overflow: hidden;
					font-weight: 400;
				}
			}


			.login-form {
				margin: 20px 10px 20px 15px;
				background: #FFFFFF;

				.login-form-items {
					padding: 15px 10px;
					border-bottom: 1px solid #F3F4F5;
					position: relative;
					display: -webkit-flex;
					display: flex;
					align-items: center;

					.login-form-items-title {
						width: 25%;
						line-height: 22px;
						height: 22px;
						flex-shrink: 0;
					}

					.login-input {
						width: 100%
					}

				}
			}
		}

		.submit-wrapper {
			padding: 10px;
			padding-top: 10px;
			background-color: 11ffff;
		}

	}

	.footer {
		padding: 10px;
		display: flex;
		justify-content: space-between;
	}
</style>